<template>
  <box-border style="padding: 20px;border-radius: 3px;">
    <el-row>
      <el-col
        :span="12"
        style="border-right: 1px solid #E0EEF9;
    padding-right: 20px;"
      >
        <el-form :model="formData" ref="formData" :rules="rules">
          <el-form-item prop="title" style="background-color: #F4FAFF;">
            <!--            <span-->
            <!--              style="color: #333333;font-size: 16px;font-weight: bold;    padding-left: 20px;"-->
            <!--            >-->
            <!--              {{ formData.title }}-->
            <!--            </span>-->
            <!--            <span style="float: right;width: 200px;line-height: 40px">-->
            <!--              <el-progress-->
            <!--                :percentage="formData.progress ? formData.progress : 0"-->
            <!--                color="#409eff"-->
            <!--                style="line-height: inherit;"-->
            <!--              >-->
            <!--              </el-progress>-->
            <!--            </span>-->
            <div style="display: flex">
              <div style="width:560px; ">
                <span
                  style="color: #333333;font-size: 16px;font-weight: bold;padding-left: 20px;"
                  >{{ formData.title }}</span
                >
              </div>
              <span
                style="float: right;width: 200px;line-height: 40px;margin:0 15px"
              >
                <el-progress
                  color="#409eff"
                  style="line-height: inherit;"
                  :percentage="formData.progress ? formData.progress : 0"
                >
                </el-progress>
              </span>
            </div>
          </el-form-item>
          <!--          <span class="label_item">项目名称：{{ formData.projectName }}</span>-->
          <el-row>
            <el-col :span="12">
              <span class="label_item">督办编号：{{ formData.code }}</span>
            </el-col>
            <el-col :span="12">
              <span class="label_item">
                督办分类：{{ formData.categoryName }}
              </span>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <span class="label_item">
                牵头领导：{{ formData.leaderName }}
              </span>
            </el-col>
            <el-col :span="12">
              <span class="label_item">
                主要领导：{{ formData.mainLeaderUserName }}
              </span>
            </el-col>
            <el-col :span="12">
              <span class="label_item">
                紧急程度：{{ formData.urgencyName }}
              </span>
            </el-col>
          </el-row>
          <!--          <el-row>-->
          <!--            <el-col :span="12">-->
          <!--              <span class="label_item"-->
          <!--                >责任人：{{ formData.responsiblePerson }}</span-->
          <!--              >-->
          <!--            </el-col>-->
          <!--            <el-col :span="12">-->
          <!--              <span class="label_item"-->
          <!--                >责任单位：{{ formData.responsibleUnit }}</span-->
          <!--              >-->
          <!--            </el-col>-->
          <!--          </el-row>-->
          <!--          <el-row>-->
          <!--            <el-col :span="12">-->
          <!--              <span class="label_item"-->
          <!--                >联系人：{{ formData.linkUserName }}</span-->
          <!--              >-->
          <!--            </el-col>-->
          <!--            <el-col :span="12"> </el-col>-->
          <!--          </el-row>-->
          <el-row>
            <el-col :span="12">
              <span class="label_item">
                计划开始时间：{{
                  formData.planStartTime | formatTime("yyyy-MM-dd")
                }}
              </span>
            </el-col>
            <el-col :span="12">
              <span class="label_item"
                >计划结束时间：{{
                  formData.planEndTime | formatTime("yyyy-MM-dd")
                }}</span
              >
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <span class="label_item">主办：{{ formData.hostUnit }}</span>
            </el-col>
            <el-col :span="12">
              <span class="label_item">协办：{{ formData.coSponsorUnit }}</span>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <span class="label_item"
                >发起人：{{ formData.createUserName }}</span
              >
            </el-col>
            <el-col :span="12">
              <span class="label_item"
                >事项来源：{{ formData.matterSource }}</span
              >
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <span class="label_item"
                >来文单位：{{ formData.comeFromUnit }}</span
              >
            </el-col>
            <el-col :span="12">
              <span class="label_item"
                >来文时间：{{
                  formData.comeFromTime | formatTime("yyyy-MM-dd")
                }}</span
              >
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <span class="label_item"
                >是否抄送主要领导：{{
                  formData.defaultLeaderFlag ? "是" : "否"
                }}</span
              >
            </el-col>
            <el-col :span="12">
              <span class="label_item"
                >最近更新时间：{{ formData.updateTime }}</span
              >
            </el-col>
          </el-row>
          <el-row>
            <span class="label_item"
              >汇报方式：{{ formData.dateType | reportType }}</span
            >
            <span v-if="formData.isEveryday" class="label_item">{{
              formData.isEveryday | isEveryday
            }}</span>
            <span v-if="formData.isWeek" class="label_item">{{
              formData.isWeek | isWeek
            }}</span>
            <span v-if="formData.isMonthDay" class="label_item">{{
              formData.isMonthDay | isMonthDay
            }}</span>
            <span v-if="formData.isIntervalDay" class="label_item">{{
              formData.isIntervalDay | isIntervalDay
            }}</span>
          </el-row>
          <el-col style="padding-left: 20px;">
            <span class="label_item" style="padding-left: 0px;">附件： </span>
            <sz-common-upload
              :readonly="true"
              :config="{ buttonText: '附件', uploadTip: '' }"
              v-model="formData.attachment"
              path="supervise"
              item-bg="#F5F6FA"
              :auto-upload="true"
            ></sz-common-upload>
          </el-col>
          <el-col>
            <el-divider></el-divider>
          </el-col>

          <el-col v-for="(item, index) in responsibleList" :key="index">
            <div>
              <span class="content_label">事项{{ index + 1 }}</span>
              <span
                :class="statusStyle(item)"
                style="float:right;margin-right: 10px;font-size: 14px"
                >{{ item.status | keyText("SUPERVISION_STATUS") }}</span
              >
            </div>
            <div style="display: flex;margin-bottom: 0">
              <div style="width:550px; ">
                <el-tooltip
                  :disabled="item.content.length <= 34"
                  :content="item.content"
                  placement="top"
                >
                  <div
                    style="width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; "
                    class="label_item"
                  >
                    事项名称：{{ item.content }}
                  </div>
                </el-tooltip>
              </div>
              <span
                style="float: right;width: 200px;line-height: 40px;margin-left:40px"
              >
                <el-progress
                  color="#409eff"
                  style="line-height: inherit;"
                  :percentage="item.progress"
                >
                </el-progress>
              </span>
            </div>
            <div>
              <span class="label_item">责任人：{{ item.responsibleName }}</span>
              <span style="float: right;margin-right: 50px;" class="label_item">
                责任单位：{{ item.responsibleUnit }}
              </span>
            </div>
            <div>
              <span class="label_item"
                >最近更新时间：{{ item.updateTime }}</span
              >
            </div>
            <el-divider></el-divider>
          </el-col>
          <el-col>
            <div class="content_label">
              督办内容
            </div>
            <div style="text-indent:35px;">
              <span class="label_item">{{ formData.content }} </span>
            </div>
            <el-divider></el-divider>
          </el-col>

          <el-col>
            <div class="content_label">
              备注：
            </div>
            <div>
              <span class="label_item">{{ formData.remark }}</span>
            </div>
            <el-divider></el-divider>
          </el-col>
          <div style="text-align: center;padding: 20px;">
            <span>
              <el-button
                @click="cancelTask"
                type="danger"
                v-if="
                  myCanCancelResponsibleList &&
                    myCanCancelResponsibleList.length > 0
                "
                >撤销 </el-button
              ><el-button
                @click="showReport"
                v-if="myResponsibleList && myResponsibleList.length > 0"
                >汇报</el-button
              >
              <el-button
                @click="submitCompleted"
                v-if="myResponsibleList && myResponsibleList.length > 0"
                >提交完成</el-button
              >
              <el-button
                @click="confirmCompleted"
                v-if="
                  waitConfirmResponsibleList &&
                    waitConfirmResponsibleList.length > 0
                "
                >确认完成</el-button
              ></span
            >
          </div>
        </el-form>
      </el-col>
      <el-col :span="12" style="padding-left: 20px;">
        <el-form
          :inline="true"
          style="margin-left: 10px"
          label-position="left"
          class="demo-form-inline"
        >
          <el-form-item label="关键字:">
            <el-input
              placeholder="请输入关键字"
              v-model="searchDto.keywords"
            ></el-input>
          </el-form-item>
          <el-form-item label="时间:">
            <el-date-picker
              v-model="value4"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="getSupervisionReportPageList()"
            >
              查询
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-refresh-left"
              @click="reset"
            >
              重置
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-download"
              @click="exportExcel()"
            >
              导出
            </el-button>
          </el-form-item>
        </el-form>
        <div style="text-align: center;padding-bottom: 10px;">
          <span class="title">办理情况</span>
        </div>
        <cm-scroll>
          <el-timeline class="time-line" :style="getHeight()">
            <el-timeline-item
              v-for="(item, index) in reportList.records"
              :key="index"
            >
              <span
                v-if="item.reportStatus == 'HAS_BEEN_REPORTED'"
                slot="dot"
                style="margin-top: 10px;background-color: white;"
                >{{ item.reportTime }}
              </span>
              <span
                v-if="
                  item.reportStatus == 'STAY_REPORT' ||
                    item.reportStatus == 'NOT_TO_REPORT'
                "
                slot="dot"
                style="margin-top: 10px;background-color: white;"
                >{{ item.generateTime }}
              </span>
              <div
                class="box_card"
                v-if="item.reportStatus == 'HAS_BEEN_REPORTED'"
              >
                <div
                  style="display: flex;flex-flow: row nowrap;justify-content: space-between;"
                >
                  <span style="width: 200px;">
                    <el-progress
                      :percentage="item.progress ? item.progress : 0"
                      color="#409eff"
                      style="line-height: inherit;"
                    ></el-progress>
                  </span>
                  <span class="person">责任人：{{ item.reportUserName }}</span>
                </div>
                <div style="margin-top: 10px">
                  <span class="item_content">
                    {{ item.content }}
                  </span>
                </div>
                <div style="margin-top: 10px;">
                  <span style="color: #99B4CA;">已阅人员：</span>
                  <span>{{ item.readUsers }}</span>
                </div>
                <div style="margin-top: 28px;">
                  <sz-common-upload
                    :readonly="true"
                    :key="index"
                    :config="{ buttonText: '附件', uploadTip: '' }"
                    v-model="item.attachment"
                    path="supervise"
                    :auto-upload="true"
                  ></sz-common-upload>
                </div>
                <el-divider></el-divider>
                <div>
                  <span
                    style="display: inline-block;color:#DC7474;margin-bottom: 14px"
                  >
                    点评:
                  </span>

                  <!-- 点评评论及回复 -->
                  <div v-for="(item1, index1) in item.opinions" :key="index1">
                    <div style="display:flex;justify-content:flex-start;">
                      <!-- 伪头像 -->
                      <div
                        style="width:60px;height:60px;line-height:60px;text-align:center;font-size:1.5rem;font-weight:bold;color:white;border-radius:50%;margin-right:10px;background-color:#bed8e3"
                      >
                        {{ item1.leaderUserName | indent }}
                      </div>
                      <!-- 中间主体 -->
                      <div
                        style="width:75%;padding: 5px;box-sizing: border-box;"
                      >
                        <!-- 评论人 + 日期 -->
                        <div style="margin-bottom:10px">
                          <span style="font-size: 16px;">{{
                            item1.leaderUserName
                          }}</span>
                          <span style="margin-left:10px;color:grey">{{
                            item1.createTime
                          }}</span>
                        </div>
                        <!-- 评论 -->
                        <div>{{ item1.opinion }}</div>
                        <!-- 回复框 -->
                        <div style="margin-top:20px">
                          <div v-for="i in item1.children" :key="i.id">
                            <div
                              style="display:flex;justify-content:flex-start;margin-top:10px"
                            >
                              <!-- 回复框伪头像 -->
                              <div
                                style="width:40px;height:40px;line-height:40px;text-align:center;font-size:1.3rem;font-weight:bold;color:white;border-radius:50%;margin:5px;background-color:#bed8e3"
                              >
                                {{ i.leaderUserName | indent }}
                              </div>
                              <!-- 回复框主体 -->
                              <div
                                style="width:75%;padding: 5px;box-sizing: border-box;"
                              >
                                <div style="margin-bottom:4px">
                                  <span>{{ i.leaderUserName }}</span>
                                  <span style="margin-left:10px;color:grey">{{
                                    i.createTime
                                  }}</span>
                                </div>
                                <div>{{ i.opinion }}</div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div style="text-align:center;">
                        <span
                          v-if="item.reply"
                          style="color:#8abbf6;cursor:pointer"
                          @click="reply(item1, item)"
                          >回复</span
                        >
                      </div>
                    </div>

                    <!-- <p style="margin-top:0 !important;text-indent: 2em">
                      {{ item1.opinion }}
                    </p>
                    <div
                      style="display: flex;justify-content: space-between;color:#999999;"
                    >
                      <span>{{ item1.leaderUserName }}</span>
                      <span>{{ item1.createTime }}</span>
                    </div> -->
                    <el-divider></el-divider>
                  </div>

                  <!-- 提交点评 -->
                  <el-row v-if="isOpinion && canOption(item)">
                    <el-col>
                      <el-input
                        style="margin:0 0  15px 0"
                        type="textarea"
                        :rows="2"
                        placeholder="请填写点评意见"
                        v-model="item.leaderOptions"
                      >
                      </el-input>
                    </el-col>
                    <el-col>
                      <el-button
                        size="mini"
                        type="primary"
                        :loading="loading"
                        @click="subOpinion(item)"
                      >
                        提交
                      </el-button>
                    </el-col>
                  </el-row>
                </div>
                <el-row style="margin-top: 2px">
                  <el-col :span="24">
                    <el-button
                      size="mini"
                      type="danger"
                      :loading="loading"
                      @click="recallReport(item)"
                      v-if="
                        item.reportUserId === currentTokenUser.user.userId &&
                          thisDay(item.reportTime)
                      "
                    >
                      撤回汇报
                    </el-button>
                  </el-col>
                </el-row>
              </div>
              <div class="box_card" v-if="item.reportStatus == 'STAY_REPORT'">
                <div style="display: flex">
                  <div style="width:550px; ">
                    <span style="color: #99B4CA;">事项名称：</span>
                    <span>{{ item.responsibleContent }}</span>
                    <div style="margin:20px 0">
                      <span style="color: #99B4CA;">责任人：</span>
                      <span>{{ item.reportUserName }}</span>
                    </div>
                  </div>
                  <div style="margin-left: 30px">
                    <span
                      style="float:right;color:#F12727;font-size: 13px;min-width: 45px"
                      >{{
                        item.reportStatus | keyText("SUPERVISION_REPORT_STATUS")
                      }}</span
                    >
                  </div>
                </div>
                <el-divider
                  v-if="item.reportUserId === currentTokenUser.user.userId"
                ></el-divider>
                <el-button
                  size="mini"
                  type="primary"
                  :loading="loading"
                  @click="handleReport(item)"
                  v-if="item.reportUserId === currentTokenUser.user.userId"
                >
                  汇报
                </el-button>
              </div>
              <div class="box_card" v-if="item.reportStatus == 'NOT_TO_REPORT'">
                <div style="display: flex">
                  <div style="width:550px; ">
                    <span style="color: #99B4CA;">事项名称：</span>
                    <span>{{ item.responsibleContent }}</span>
                    <div style="margin:20px 0">
                      <span style="color: #99B4CA;">责任人：</span>
                      <span>{{ item.reportUserName }}</span>
                    </div>
                  </div>
                  <div style="margin-left: 30px">
                    <span
                      style="float:right;color:#FF943E;font-size: 13px;min-width: 45px"
                      >{{
                        item.reportStatus | keyText("SUPERVISION_REPORT_STATUS")
                      }}</span
                    >
                  </div>
                </div>
              </div>
            </el-timeline-item>
            <el-pagination
              style="float:right;display:block"
              @current-change="handleCurrentChange"
              :current-page="reportList.current"
              layout="total, prev, pager, next"
              :total="reportList.total"
              :page-size="searchDto.pageSize"
              :page-count="reportList.pages"
            >
            </el-pagination>
          </el-timeline>
        </cm-scroll>

        <!-- 回复弹框 -->
        <el-dialog title="回复评论" :visible.sync="showReply">
          <el-input
            style="margin:0 0 15px 0"
            type="textarea"
            :rows="4"
            placeholder="请填写回复信息"
            v-model="replyMessage"
          >
          </el-input>
          <div slot="footer">
            <el-button @click="showReply = false">取 消</el-button>
            <el-button type="primary" @click="saveReply">确 定</el-button>
          </div>
        </el-dialog>
      </el-col>
    </el-row>
    <!-- 左侧汇报   -->
    <el-dialog
      title="汇报"
      append-to-body
      width="800px"
      :visible.sync="showSupervise"
      v-if="showSupervise"
      destroy-on-close
      @close="fail"
    >
      <div style="margin-right: 20px">
        <el-form
          label-width="100px"
          :rules="rules"
          :model="reportData"
          ref="reportData"
        >
          <el-form-item
            v-if="this.showAll"
            label="子事项:"
            prop="responsibleId"
          >
            <div v-for="(item, index) in myResponsibleList" :key="index">
              <div
                @click="selectGroup(item)"
                class="responsibleClass"
                :class="{ 'holder-active': item.isActive }"
              >
                <div
                  style="width: 95%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; "
                >
                  {{ item.content }}
                </div>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="汇报进度:" prop="progress">
            <el-input-number
              v-model="reportData.progress"
              :min="0"
              :max="100"
              label="反馈进度"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="汇报内容:" prop="content">
            <el-input
              type="textarea"
              :autosize="{ minRows: 3 }"
              placeholder="请输入反馈内容"
              v-model="reportData.content"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="附件:" prop="attachment">
            <sz-common-upload
              :config="{ buttonText: '附件', uploadTip: '' }"
              v-model="reportData.attachment"
              path="supervise"
              :auto-upload="true"
            ></sz-common-upload>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button type="primary" :loading="loading" @click="saveReport"
          >提交</el-button
        >
        <el-button @click="fail">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="提交"
      append-to-body
      width="40%"
      :visible.sync="showSubmit"
    >
      <el-form ref="reportData">
        <el-form-item label="子事项" prop="responsibleId">
          <div
            style="margin-left:70px"
            v-for="(item, index) in myResponsibleList"
            :key="index"
          >
            <div
              @click="selectGroup(item)"
              class="responsibleClass"
              :class="{ 'holder-active': item.isActive }"
            >
              <div
                style="width: 95%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; "
              >
                {{ item.content }}
              </div>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="submitD">确认</el-button>
        <el-button @click="fail1">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="确认完成"
      append-to-body
      width="45%"
      :visible.sync="showSubmit1"
    >
      <el-form ref="reportData">
        <el-form-item label="子事项" prop="responsibleId">
          <div
            style="margin-left:70px"
            v-for="(item, index) in waitConfirmResponsibleList"
            :key="index"
          >
            <div
              @click="selectGroup2(item)"
              class="responsibleClass"
              :class="{ 'holder-active': item.isActive }"
            >
              <div
                style="width: 95%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; "
              >
                {{ item.content }}
              </div>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="submitD1">确认</el-button>
        <el-button @click="fail4">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="撤销"
      append-to-body
      width="45%"
      :visible.sync="showSupervise1"
    >
      <el-form ref="reportData">
        <el-form-item label="子事项" prop="responsibleId">
          <div
            style="margin-left:70px"
            v-for="(item, index) in myCanCancelResponsibleList"
            :key="index"
          >
            <div
              @click="selectGroup1(item)"
              class="responsibleClass"
              :class="{ 'holder-active': item.isActive }"
            >
              <div
                style="width: 95%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; "
              >
                {{ item.content }}
              </div>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="submitD3">确认</el-button>
        <el-button @click="fail2">取消</el-button>
      </div>
    </el-dialog>
    <!--    右侧汇报-->
    <el-dialog
      title="汇报"
      append-to-body
      width="800px"
      @close="failOther"
      :visible.sync="showReportStatus"
      v-if="showReportStatus"
      destroy-on-close
    >
      <div style="margin-right: 20px">
        <el-form
          label-width="100px"
          :rules="rules"
          :model="reportDataOther"
          ref="reportDataOther"
        >
          <el-form-item label="汇报进度:" prop="progress">
            <el-input-number
              v-model="reportDataOther.progress"
              :min="0"
              :max="100"
              label="反馈进度"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="汇报内容:" prop="content">
            <el-input
              type="textarea"
              :autosize="{ minRows: 3 }"
              placeholder="请输入反馈内容"
              v-model="reportDataOther.content"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="附件:" prop="attachment">
            <sz-common-upload
              :config="{ buttonText: '附件', uploadTip: '' }"
              v-model="reportDataOther.attachment"
              path="supervise"
              :auto-upload="true"
            ></sz-common-upload>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button type="primary" :loading="loading" @click="saveReportOther"
          >提交
        </el-button>
        <el-button @click="failOther">取消</el-button>
      </div>
    </el-dialog>
  </box-border>
</template>

<script>
import { mapGetters } from "vuex";
import Moment from "moment";
import _ from "lodash";

export default {
  name: "superviseReport",
  components: {},
  data() {
    return {
      replyMessage: "",
      showReply: false,
      loading: false,
      showAll: true,
      selectedGroup: null,
      selectedGroup1: null,
      selectedGroup2: null,
      showSubmit1: false,
      showSubmit: false,
      isOpinion: "",
      value4: [],
      searchDto: {
        keywords: "",
        startTime: "",
        endTime: "",
        status: "",
        pageIndex: "",
        pageSize: 4,
        matterId: this.$route.query.matterId,
        responsibleId: "",
        userId: ""
      },
      showReportStatus: false,
      showSupervise: false,
      showSupervise1: false,
      matterId: 0,
      formData: {
        attachment: null
      },
      reportData: {
        progress: 0,
        content: "",
        matterId: "",
        responsibleId: "",
        responsibleContent: ""
      }, //反馈
      reportDataOther: {
        progress: 0,
        content: "",
        matterId: "",
        responsibleId: "",
        responsibleContent: ""
      },
      rules: {
        progress: [{ required: true, message: "请输入进度", trigger: "blur" }],
        content: [
          { required: true, message: "请输入汇报内容", trigger: "blur" }
        ]
      },
      categoryList: [], //督办分类
      reportList: [],
      responsibleList: [],
      handleReportId: "",
      handleReportMatterId: "",
      handleReportContent: "",
      handleResponsibleId: "",
      opinionId: "",
      reportItem: {}
    };
  },
  computed: {
    ...mapGetters({
      currentTokenUser: "currentTokenUser"
    }),
    // 我的进行中子事项
    myResponsibleList() {
      if (this.responsibleList) {
        let tem = [];
        this.responsibleList.map(item => {
          if (
            item.responsibleUserId === this.currentTokenUser.user.userId &&
            item.status === "DOING"
          ) {
            tem.push(item);
          }
        });
        tem.map((item, index) => {
          this.$set(item, "isActive", false);
        });
        return tem;
      } else {
        return [];
      }
    },
    // 待确认子事项
    waitConfirmResponsibleList() {
      if (this.responsibleList) {
        let tem = [];
        this.responsibleList.map(item => {
          if (
            item.status === "WAIT_CONFIRM" &&
            this.formData.createUserId === this.currentTokenUser.user.userId
          ) {
            tem.push(item);
          }
        });
        tem.map((item, index) => {
          this.$set(item, "isActive", false);
        });
        return tem;
      } else {
        return [];
      }
    },
    // 我的可撤销子事项
    myCanCancelResponsibleList() {
      if (this.responsibleList) {
        let tem = [];
        this.responsibleList.map(item => {
          if (
            item.responsibleUserId === this.currentTokenUser.user.userId &&
            item.status === "WAIT_CONFIRM"
          ) {
            tem.push(item);
          }
        });
        tem.map((item, index) => {
          this.$set(item, "isActive", false);
        });
        return tem;
      } else {
        return [];
      }
    }
  },
  mounted() {
    this.initData();
  },
  watch: {
    $route(to, from) {
      //监听路由是否变化
      if (to.query.matterId != from.query.matterId) {
        this.initData();
      }
    }
  },
  filters: {
    indent(val) {
      if (val) {
        return val.slice(0, 1);
      } else {
        return "A";
      }
    },
    reportType: function(value) {
      if (!value) return "";
      if (value == "WORKDAY") {
        return "工作日";
      } else if (value == "CALENDAR_DAY") {
        return "自然日";
      }
    },
    isEveryday: function(value) {
      if (!value) return "";
      if (value == false) {
        return "不每天";
      } else if (value == true) {
        return "每天";
      }
    },
    isWeek: function(value) {
      let arr1 = [];
      let str;
      if (!value) return "";
      if (value) {
        let arr = value.split(",").sort();
        let weekArray = ["一", "二", "三", "四", "五", "六", "日"];
        arr.map(item => {
          arr1.push(weekArray[item - 1]);
        });
        str = arr1.join("、");
      }
      return "星期" + str + "汇报";
    },
    isMonthDay: function(value) {
      if (!value) return "";
      if (value) {
        return "每月" + value + "日汇报";
      }
    },
    isIntervalDay: function(value) {
      if (!value) return "";
      if (value) {
        return "间隔" + value + "天";
      }
    }
  },
  methods: {
    reply(val, val2) {
      this.showReply = true;
      this.opinionId = val.id;
      this.reportItem = val2;
    },
    saveReply() {
      console.log(this.reportItem);
      if (this.replyMessage.length < 1) {
        this.warning("回复不能为空");
        return;
      }
      let tem = {
        body: {
          matterId: this.reportItem.matterId,
          responsibleId: this.reportItem.responsibleId,
          reportId: this.reportItem.id,
          opinion: this.replyMessage,
          opinionId: this.opinionId,
          type: "OWN"
        }
      };
      this.loading = true;
      console.log("回复参数", tem);
      this.API.addSupervisionReply(tem)
        .then(() => {
          this.showReply = false;
          this.$message({
            message: "提交成功",
            type: "success"
          });
          this.getSupervisionReportPageList();
        })
        .finally(() => {
          this.loading = false;
        });
    },
    failOther() {
      this.showReportStatus = false;
      this.reportDataOther = {
        progress: 0,
        content: "",
        matterId: "",
        responsibleId: "",
        responsibleContent: ""
      };
    },
    thisDay(day) {
      return new Date(day).toDateString() == new Date().toDateString();
    },
    //撤回汇报
    recallReport(item) {
      this.$confirm("是否确认撤回当前汇报？", "提示", {})
        .then(() => {
          let tem = { id: item.id };
          this.loading = true;
          this.API.recallSupervisionReportById(tem).then(() => {
            this.success("撤回成功");
            this.getSupervisionReportPageList(1);
          });
        })
        .catch(() => {})
        .finally(() => {
          this.loading = false;
        });
    },
    initData() {
      this.matterId = this.$route.query.matterId;
      this.getDetailInfo();
      this.searchDto = {
        keywords: "",
        startTime: "",
        endTime: "",
        status: "",
        pageIndex: "",
        pageSize: 4,
        matterId: this.$route.query.matterId,
        responsibleId: "",
        userId: ""
      };
      this.getSupervisionReportPageList();
    },
    //发送
    selectGroup(item) {
      console.log(item);
      if (item.isActive == true) {
        item.isActive = false;
        this.selectedGroup = null;
        return;
      }
      _.map(this.myResponsibleList, item1 => {
        item1.isActive = false;
      });
      item.isActive = true;
      this.selectedGroup = item;
    },
    //撤销
    selectGroup1(item) {
      console.log(item);
      if (item.isActive == true) {
        item.isActive = false;
        this.selectedGroup1 = null;
        return;
      }
      _.map(this.myCanCancelResponsibleList, item1 => {
        item1.isActive = false;
      });
      item.isActive = true;
      this.selectedGroup1 = item;
    },
    selectGroup2(item) {
      console.log(item);
      if (item.isActive == true) {
        item.isActive = false;
        this.selectedGroup2 = null;
        return;
      }
      _.map(this.waitConfirmResponsibleList, item1 => {
        item1.isActive = false;
      });
      item.isActive = true;
      this.selectedGroup2 = item;
    },
    // 状态颜色设置
    statusStyle(item) {
      let cls = "";
      switch (item.status) {
        case "DOING":
          cls = "status_doing";
          break;
        case "WAIT_CONFIRM":
          cls = "status_warn";
          break;
        case "COMPLETED":
          cls = "status_audit";
          break;
      }
      return cls;
    },
    // 是否能够点评
    canOption(item) {
      let tem = true;
      if (item.opinions) {
        item.opinions.map(itemOption => {
          if (itemOption.leaderUserId === this.currentTokenUser.user.userId) {
            tem = false;
          }
        });
      }
      return tem;
    },
    getHeight() {
      return { height: window.innerHeight - 210 + "px" };
    },
    showReport() {
      this.showSupervise = true;
      if (this.myResponsibleList && this.myResponsibleList.length === 1) {
        // this.myResponsibleList[0].isActive = true;
        this.selectGroup(this.myResponsibleList[0]);
        this.showAll = false;
      }
      this.reportData = {
        progress: 0,
        content: "",
        matterId: "",
        responsibleId: "",
        responsibleContent: ""
      };
    },
    // 提交完成
    submitCompleted() {
      if (this.myResponsibleList && this.myResponsibleList.length > 1) {
        this.showSubmit = true;
      } else {
        if (this.myResponsibleList && this.myResponsibleList.length === 1) {
          this.$confirm("确认提交?", "提示", {})
            .then(() => {
              this.API.submitSupervisionMatterById({
                responsibleId: this.myResponsibleList[0].id
              }).then(() => {
                this.success("操作成功");
                this.getDetailInfo();
              });
            })
            .catch(() => {});
        }
      }
    },
    submitD() {
      console.log(this.selectedGroup);
      if (this.selectedGroup == null) {
        this.warning("请选择子事项");
        return;
      }
      let tem = this.selectedGroup.id;
      this.$confirm("确认提交?", "提示", {})
        .then(() => {
          this.API.submitSupervisionMatterById({
            responsibleId: tem
          }).then(() => {
            this.success("提交成功");
            this.getDetailInfo();
            this.showSubmit = false;
          });
        })
        .catch(() => {});
    },
    // 确认完成
    confirmCompleted() {
      if (
        this.waitConfirmResponsibleList &&
        this.waitConfirmResponsibleList.length > 1
      ) {
        this.showSubmit1 = true;
      } else {
        if (
          this.waitConfirmResponsibleList &&
          this.waitConfirmResponsibleList.length === 1
        ) {
          this.$confirm("确认完成?", "提示", {})
            .then(() => {
              this.API.completeSupervisionMatterById({
                responsibleId: this.waitConfirmResponsibleList[0].id
              }).then(res => {
                this.success("操作成功");
                this.getDetailInfo();
              });
            })
            .catch(() => {});
        }
      }
    },
    submitD1() {
      console.log(this.selectedGroup2);
      if (this.selectedGroup2 == null) {
        this.warning("请选择子事项");
        return;
      }
      let tem = this.selectedGroup2.id;
      this.$confirm("确认完成?", "提示", {})
        .then(() => {
          this.API.completeSupervisionMatterById({
            responsibleId: tem
          }).then(() => {
            this.success("提交成功");
            this.getDetailInfo();
            this.showSubmit1 = false;
          });
        })
        .catch(() => {});
    },
    // 获取事项详情
    getDetailInfo() {
      this.API.getSupervisionMatterInfoById({ id: this.matterId }).then(res => {
        this.isOpinion = res.data.isOpinion;
        this.formData = res.data.supervisionMatter;
        console.log(this.formData);
        this.responsibleList = res.data.responsibleList;
      });
    },
    //获取办理情况
    getSupervisionReportPageList(val) {
      console.log(val);
      this.searchDto.startTime = "";
      this.searchDto.endTime = "";
      if (this.value4 && this.value4.length > 0) {
        this.searchDto.startTime = Moment(this.value4[0]).format("YYYY-MM-DD");
        this.searchDto.endTime = Moment(this.value4[1]).format("YYYY-MM-DD");
      }
      let tem = Object.assign(this.searchDto, val);
      let { matterId } = tem;
      if (matterId) {
        this.API.getSupervisionReportPageList(tem).then(ret => {
          ret.data.records.map(item => {
            let r = this.setReply(item.opinions);
            console.log(r);
            this.$set(item, "opinions", r);
          });
          console.log("分页", ret.data.records);
          this.reportList = ret.data;
          this.reportList.records.map(item => {
            this.$set(item, "leaderOptions", "");
          });
        });
      }
    },
    // 设置回复
    setReply(list) {
      let reply = [];
      let comment = [];
      list.map(j => {
        if (j.opinionId) {
          reply.push(j);
        } else {
          j.children = [];
          comment.push(j);
        }
      });
      reply.map(k => {
        comment.map(l => {
          if (k.opinionId == l.id) {
            l.children.push(k);
          }
        });
      });
      return comment;
    },
    // 提交汇报进度
    saveReport() {
      if (this.selectedGroup == null) {
        this.warning("请选择子事项");
        return;
      }
      this.reportData.responsibleId = this.selectedGroup.id;
      this.reportData.matterId = this.selectedGroup.matterId;
      this.reportData.responsibleContent = this.selectedGroup.content;
      console.log("this.reportData ", this.reportData);
      this.loading = true;
      this.$refs["reportData"].validate(valid => {
        if (valid) {
          this.API.reportSupervisionMatter({ body: this.reportData })
            .then(res => {
              this.reportList = [];
              this.selectedGroup = null;
              this.getDetailInfo();
              this.getSupervisionReportPageList();
            })
            .finally(() => {
              this.showSupervise = false;
              this.showAll = true;
              this.loading = false;
            });
        }
      });
    },
    saveReportOther() {
      console.log("this.reportData ", this.reportDataOther);
      this.loading = true;
      this.$refs["reportDataOther"].validate(valid => {
        if (valid) {
          let tem = Object.assign(this.reportDataOther, {
            id: this.handleReportId,
            matterId: this.handleReportMatterId,
            responsibleContent: this.handleReportContent,
            responsibleId: this.handleResponsibleId
          });
          this.API.reportSupervisionMatter({ body: tem })
            .then(() => {
              this.getSupervisionReportPageList();
            })
            .finally(() => {
              this.showReportStatus = false;
              this.loading = false;
              this.failOther();
            });
        }
      });
    },
    // 翻页
    handleCurrentChange(val) {
      this.searchDto.pageIndex = val;
      this.getSupervisionReportPageList(1);
    },
    // 提交意见
    subOpinion(val) {
      if (val.leaderOptions.length < 1) {
        this.warning("批示不能为空");
        return;
      }
      let tem = {
        body: {
          matterId: val.matterId,
          responsibleId: val.responsibleId,
          reportId: val.id,
          opinion: val.leaderOptions,
          type: "LEADER"
        }
      };
      this.loading = true;
      console.log(tem);
      this.API.opinionSupervisionReport(tem)
        .then(() => {
          this.$message({
            message: "提交成功",
            type: "success"
          });
          this.getSupervisionReportPageList();
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //汇报
    handleReport(val) {
      this.showReportStatus = true;
      this.handleReportId = val.id;
      this.handleReportMatterId = val.matterId;
      this.handleReportContent = val.responsibleContent;
      this.handleResponsibleId = val.responsibleId;
      this.reportDataOther.attachment = val.attachment;
      this.reportDataOther.content = val.content;
      this.reportDataOther.progress = val.progress;
    },
    //撤销
    async cancelTask() {
      if (
        this.myCanCancelResponsibleList &&
        this.myCanCancelResponsibleList.length > 1
      ) {
        this.showSupervise1 = true;
        // this.curOperate = "CANCEL";
      } else {
        if (
          this.myCanCancelResponsibleList &&
          this.myCanCancelResponsibleList.length === 1
        ) {
          this.$confirm("确认撤销?", "提示", {})
            .then(() => {
              this.API.retreatSupervisionMatterById({
                responsibleId: this.myCanCancelResponsibleList[0].id
              }).then(res => {
                this.success("操作成功");
                this.getDetailInfo();
              });
            })
            .catch(() => {});
        }
      }
    },
    submitD3() {
      console.log(this.selectedGroup1);
      if (this.selectedGroup1 == null) {
        this.warning("请选择子事项");
        return;
      }
      let tem = this.selectedGroup1.id;
      this.$confirm("确认撤销?", "提示", {})
        .then(() => {
          this.API.retreatSupervisionMatterById({
            responsibleId: tem
          }).then(() => {
            this.success("提交成功");
            this.getDetailInfo();
            this.showSupervise1 = false;
          });
        })
        .catch(() => {});
    },
    fail() {
      this.showSupervise = false;
      this.selectedGroup = "";
      this.myResponsibleList.map(item => {
        item.isActive = false;
      });
      this.showAll = true;
    },
    fail1() {
      this.showSubmit = false;
      this.selectedGroup = "";
      this.myResponsibleList.map(item => {
        item.isActive = false;
      });
    },
    fail2() {
      this.showSupervise1 = false;
      this.selectedGroup1 = "";
      this.myCanCancelResponsibleList.map(item => {
        item.isActive = false;
      });
    },
    fail4() {
      this.showSubmit1 = false;
      this.selectedGroup2 = "";
      this.waitConfirmResponsibleList.map(item => {
        item.isActive = false;
      });
    },
    exportExcel() {
      let fileDownload = require("js-file-download");
      let params = {};
      if (this.value4 && this.value4.length > 0) {
        this.searchDto.startTime = Moment(this.value4[0]).format("YYYY-MM-DD");
        this.searchDto.endTime = Moment(this.value4[1]).format("YYYY-MM-DD");
      }
      let { keywords, startTime, endTime, matterId } = this.searchDto;
      params.reportKeywords = keywords;
      params.startReportTime = startTime;
      params.endReportTime = endTime;
      params.matterId = matterId;
      console.log(params);
      this.ExportApi.getSupervisionMatterExcel(params).then(res => {
        const disposition = res.headers["content-disposition"];
        let fileName = this.getFileName(disposition);
        fileDownload(res.data, fileName);
        this.loading2 = false;
      });
    },
     // 重置
    reset() {
      this.value4 = []
      this.searchDto = {
        keywords: "",
      }
    },
  }
};
</script>

<style lang="less" scoped>
.time-line {
  padding-inline-start: 60px;

  /deep/ .el-timeline-item__dot {
    left: -57px !important;
    width: 92px !important;
    font-weight: bold;
    color: #333333;
  }

  /deep/ .el-timeline-item__tail {
    border-left: 1px dotted #e0eef9;
  }

  /deep/ .el-timeline-item__content {
    margin-left: 14px;
  }
}

/deep/ .el-progress__text {
  margin-left: 16px !important;
}

/deep/ .el-progress-bar__outer {
  height: 10px !important;
}

.box_card {
  background: rgba(244, 250, 255, 1);
  opacity: 1;
  padding: 28px;
  border-radius: 10px;
  margin-right: 10px;
}

.label_item {
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 40px;
  padding-left: 20px;
  color: #333333;
  opacity: 1;
  margin-bottom: 10px;
}

.item_content {
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 30px;
  color: rgba(51, 51, 51, 1);
  opacity: 1;
}

.content_label {
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  line-height: 28px;
  margin-left: 22px;
  color: #333333;

  opacity: 1;
}

.person {
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 24px;
  color: rgba(153, 180, 202, 1);
  opacity: 1;
}

/deep/ .el-divider {
  background-color: #e0eef9;
}

/deep/ .el-divider--horizontal {
  margin-top: 10px;
}

/deep/ .el-textarea__inner {
  background: rgba(244, 250, 255, 0);
}

.responsibleClass {
  margin-bottom: 15px !important;
  margin-right: 20px;
  margin-top: 0px;
  background-color: #f4faff;
  padding: 3px 20px;
  border-radius: 10px;
  min-width: 200px;
  max-width: 630px;
  cursor: pointer;
}

.holder-active {
  margin-bottom: 15px !important;
  margin-right: 20px;
  margin-top: 0px;
  background-color: #e0eef9;
  padding: 3px 20px;
  border-radius: 10px;
  max-width: 630px;
  cursor: pointer;
}
</style>
